<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: auto;
        }

        table td {
            padding: 15px;
        }

        #app1 {
            text-align: center;
        }
    </style>
</head>

<body>


    <div id="app1">
        <div id="index_product">
            <table>
                <h1>商城首页</h1>
                <tr>
                    <th>id</th>
                    <th>商品</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in indexArr">
                    <td>{{index+1}}</td>
                    <td>{{item.product}}</td>
                    <td>{{item.price}}</td>
                    <td><input type="button" value="加入购物车" v-on:click="addProduct(index)"></td>
                </tr>
            </table>
            <input type="button" style="width: 110px; height: 50px;" value="去购物车结算" v-on:click="shoppingCar">
        </div>

        <div id="shoppingCar" style="display: none;">
            <h1>购物车</h1>
            <input type="button" value="返回首页" v-on:click="fanhuiIndex" style="width: 110px; height: 50px;">
            <p></p>
            <table>
                <tr>
                    <th>商品</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{item.product}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <input type="button" value="-" v-on:click="jian(index)">
                        {{item.count}}
                        <input type="button" value="+" v-on:click="add(index)">
                    </td>
                    <td>
                        <input type="button" value="删除宝贝" v-on:click="delete_product_btn(index)">
                    </td>
                </tr>

            </table>

            <h1>总金额：{{c_price}}</h1>
        </div>

    </div>
    <hr>




    <script src="./js/vue.min.js"></script>

    <script>
        let app1 = new Vue({
            el: '#app1',
            data: {
                arr: [

                ],
                indexArr: [
                    {
                        id: 1,
                        product: '手机',
                        price: 100,
                        count: 0
                    },
                    {
                        id: 2,
                        product: '电脑',
                        price: 200,
                        count: 0

                    },
                    {
                        id: 3,
                        product: '摄像机',
                        price: 300,
                        count: 0
                    }
                ]
            },
            methods: {
                add: function (index) {
                    this.arr[index].count++
                },
                jian: function (index) {
                    if (this.arr[index].count > 0) {
                        this.arr[index].count--
                    } else {
                        alert('该宝贝不能减少了哦~~')
                    }
                },
                //添加到购物车商品的按钮
                addProduct: function (index) {
                        //数组是空的 那就直接添加商品
                    if (this.arr.length == 0) {
                        this.arr.push(this.indexArr[index])
                        this.indexArr[index].count++
                    } else {
                        //不是空的 那就要判断是否有重复添加的商品
                        if (this.arr.length > 0) {
                            let flage = false
                            //判断arr里有没有重复添加的商品
                            let cfAdd = this.arr.filter(item => {
                                return item.product == this.indexArr[index].product
                            })
                            // console.log(cfAdd);
                            //如果过滤后的数组有数据 那就说明重复了 直接加数量即可
                            if (cfAdd.length>0) {
                                console.log('重复添加');
                                this.indexArr[index].count++
                            } else {
                                //否则就直接添加呗~~~
                                this.arr.push(this.indexArr[index])
                                this.indexArr[index].count++
                            }
                        }
                    }
                },
                delete_product_btn: function (index) {
                    console.log(index);
                    console.log(this.indexArr[index]);
                    this.arr.splice(index, 1)
                    this.indexArr[index].count=0;
                },
                shoppingCar: function () {
                    let index_div = document.getElementById('index_product');
                    let shoppingCar = document.getElementById('shoppingCar')
                    index_div.style.display = "none"
                    shoppingCar.style.display = "block"
                },
                fanhuiIndex: function () {
                    let index_div = document.getElementById('index_product');
                    let shoppingCar = document.getElementById('shoppingCar')
                    index_div.style.display = "block"
                    shoppingCar.style.display = "none"
                }
            },
            computed: {
                c_price: function () {
                    let money = 0;
                    for (let i = 0; i < this.arr.length; i++) {
                        money = money + this.arr[i].price * this.arr[i].count
                    }
                    return money
                }
            }
        })
    </script>
</body>
</html>